<template>
  <div class="container">
    <!-- 非条件分支 -->
    <div v-if="processTree.nodeType !== 1" class="node-wrap">
      <div v-if="processTree.root">
        <img :src="taskStart" class="task-img" alt="">
      </div>
      <template v-else>
        <div class="node-wrap-box">
          <div :style="{ opacity: isOpacityNode ? 0.5 : 1 }" class="btn-hover move-disabled node-wrap-content">
            <div :style="titleColor(processTree)" class="title">
              <img v-if="[0, 4, 5].includes(processTree.nodeType)" :src="auditIconNode" alt="">
              <img v-if="processTree.nodeType === 3" :src="senderIconNode" alt="">
              <el-input v-focus v-if="isInput" :maxlength="50" v-model="processTree.nodeName" class="editable-title-input" size="mini" type="text" @blur="editNodeName" />
              <div v-else class="ellipsisOne flex-1 text-hover" @click.stop="editNodeName"> {{ processTree.nodeName || '--' }}</div>
              <div class="top-btn">
                <img :src="copyImg" class="action-icon" title="复制" alt="复制" @click="handleNodeCopy(true)">
                <img :src="cutImg" class="action-icon" title="剪切" alt="剪切" @click="handleNodeCopy(false)">
                <i class="icon el-icon-close" @click.stop="deleteNode"/>
              </div>
            </div>
            <div class="node-info" @click.stop="openAudit">
              <div class="info">
                <!-- 节点展示信息 -->
                <template v-if="[0, 5].includes(processTree.nodeType)">
                  <div v-if="processTree.examineRoles && processTree.examineRoles.length" class="info-item ellipsisOne">{{ arrToStr(processTree.examineRoles, 'roleName') }}</div>
                  <!-- <ToolTip :content="arrToStr(processTree.examineRoles, 'roleName')" class="info-item" /> -->
                  <!-- <div v-for="(item, index) in processTree.examineRoles" :key="index" class="info-item">{{ item.roleName }}</div> -->
                  <div v-else class="info-item">点击设置{{ processTree.nodeType === 5 ? '加签' : '审批' }}节点</div>
                </template>
                <template v-if="processTree.nodeType === 3">
                  <div v-if="processTree.examineRoles && processTree.examineRoles.length" class="info-item ellipsisOne">{{ getCopyerName(processTree) }}</div>
                  <div v-else class="info-item">点击设置抄送人</div>
                </template>
                <template v-if="processTree.nodeType === 4">
                  <div v-if="processTree.examineRoles && processTree.examineRoles.length && processTree.examineRoles[0].roleName" class="info-item ellipsisOne">{{ processTree.examineRoles[0].roleName }}</div>
                  <div v-else class="info-item">点击设置角色名称</div>
                </template>
              </div>
              <div class="right-btn"><i class="el-icon-arrow-right"/></div>
            </div>
          </div>
        </div>
      </template>
      <addLine v-model="processTree.childNode" :is-condition="isCondition" :parent-id="processTree.id" />
    </div>
    <!-- 条件分支 -->
    <div v-else class="batch-wrap">
      <div v-if="isOpacityNode" class="wrap-shadow" />
      <div class="branch-box-wrap">
        <div class="branch-box">
          <div class="add-branch move-disabled branch-hover">
            <span @click="addCondition">添加条件</span>
            <div class="operate-group top-btn">
              <img :src="copyImg" class="action-icon" title="复制" alt="复制" @click="handleNodeCopy(true, true)">
              <img :src="cutImg" class="action-icon" title="剪切" alt="剪切" @click="handleNodeCopy(false, true)">
            </div>
          </div>
          <draggable
            v-model="processTree.conditionNodes"
            v-bind="dragOptions"
            :group="processTree.id"
            handle=".mover"
            @end="onEnd">
            <transition-group type="transition" class="draggable-item-list">
              <div v-for="(item,index) in processTree.conditionNodes" :key="index + item.nodeType" class="col-box">
                <div class="condition-node-box">
                  <div class="condition-node node-wrap-box btn-hover move-disabled">
                    <div :style="titleColor(item)" class="title">
                      <img v-if="item.nodeType === 0" :src="auditIconNode" alt="">
                      <img v-if="item.nodeType === 3" :src="senderIconNode" alt="">
                      <el-input v-focus v-if="item._isInput" :maxlength="50" v-model="item.nodeName" class="editable-title-input" size="mini" type="text" @blur="editConditionName(item)" />
                      <div v-else class="ellipsisOne flex-1 text-hover" @click="editConditionName(item)"> {{ item.nodeName }}</div>
                      <div class="top-btn">
                        <i class="copy el-icon-rank mover" style="cursor: move;" />
                        <i class="copy el-icon-document-copy" @click="copyCondition(item)"/>
                        <i class="icon el-icon-close" @click="deleteCondition(item, index)"/>
                      </div>
                      <div v-if="item.conditionList" class="priority-text">优先级{{ item.conditionList.priority }}</div>
                    </div>
                    <div class="node-info" @click="openAudit(item)">
                      <div class="condition-info">
                        <div v-if="item.conditionList && item.conditionList.list.length" class="info-item flex-div">
                          <div class="ellipsisOne" style="flex:1;">{{ getConditionName(item.conditionList.list) }}</div>
                          <div v-if="item.conditionList.list.length > 1" class="num-sty">+{{ item.conditionList.list.length - 1 }}</div>
                        </div>
                        <!-- 节点展示信息 -->
                        <div v-else class="info-item">点击设置条件</div>
                      </div>
                    </div>
                  </div>
                  <addLine v-model="item.childNode" :parent-id="item.id" is-condition />
                </div>
                <NodeWrap v-if="isNotEmpty(item.childNode)" v-model="item.childNode" is-condition />
                <div v-if="index === 0" class="top-left-cover-line"/>
                <div v-if="index === 0" class="bottom-left-cover-line"/>
                <div v-if="index === processTree.conditionNodes.length - 1" class="top-right-cover-line"/>
                <div v-if="index === processTree.conditionNodes.length - 1" class="bottom-right-cover-line"/>
              </div>
            </transition-group>
          </draggable>
        </div>
        <addLine v-model="processTree.childNode" :is-condition="isCondition" :parent-id="processTree.id" />
      </div>
    </div>
    <NodeWrap v-if="isNotEmpty(processTree.childNode)" :is-condition="isCondition" v-model="processTree.childNode" />
    <div v-else-if="!isCondition" class="end-node">
      <div class="dot"/>
      <img :src="taskEnd" class="task-img" alt="">
    </div>
    <slot />
  </div>

</template>

<script>
import addLine from '../components/addLine';
import draggable from 'vuedraggable';
import { mapState } from 'vuex';
import { createIntTypeNumber } from '@/utils/tools';
import { ROLE_TYPE } from '@/utils/const/process';
import { format } from '@/filters/date';
// img
import auditIconNode from '@/assets/legalProcess/auditIconNode.png';
import senderIconNode from '@/assets/legalProcess/senderIconNode.png';
import taskEnd from '@/assets/legalProcess/taskEnd.png';
import taskStart from '@/assets/legalProcess/taskStart.png';
import draggableImg from '@/assets/orderlist/draggable.png';
import copyImg from '@/assets/legalProcess/copy.png';
import cutImg from '@/assets/legalProcess/cut.png';
import { departmentFields, timeFields } from './utils/const';
import { COOPER_DATE_TYPES } from '@/utils/const/process';

export default {
  name: 'NodeWrap',
  components: { addLine, draggable },
  model: {
    prop: 'processTree',
    event: 'changeProcesss'
  },
  props: {
    processTree: {
      type: Object,
      default: () => ({})
    },
    isCondition: { // 是否在循环分支中
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      auditIconNode, senderIconNode, taskEnd, taskStart, draggableImg, copyImg, cutImg,
      // titleColor: [// 【v2.9.7】节点类型 0: 审批人节点  1: 条件分支  2: 条件子节点  3:抄送节点 4:飞来通告审批节点 5: 加签
      //   { background: '#fd8546', color: '#ffffff' },
      //   { background: '#ffffff', color: '#406EFF' },
      //   { background: '#ffffff', color: '#406EFF' },
      //   { background: '#406EFF', color: '#ffffff' },
      //   { background: '#31CC9C', color: '#ffffff' },
      //   { background: '#a691ff', color: '#ffffff' }
      // ],
      isInput: false,
      dragOptions: {
        animation: 200,
        group: 'description',
        disabled: false,
        ghostClass: 'ghost'
      },
      nodeCutting: false
    };
  },
  computed: {
    ...mapState({
      'clipboardNode': state => state.process.clipboardNode,
      'nodePasting': state => state.process.nodePasting,
      'roleGroupList': state => state.formMake.roleGroups,
      'allUserFields': state => state.formMake.allUserFields,
      'BPList': state => state.formMake.BPList
    }),
    isOpacityNode() {
      const { isCopy, node } = this.clipboardNode;
      if (isCopy || !node) {
        return false;
      } else {
        // const { id, _id } = node;
        const currId = this.processTree.id;
        // const curr_Id = this.processTree._id;
        // return (id && currId && id === currId) || (_id && curr_Id && _id === curr_Id);
        return node.id && currId && node.id === currId;
      }
    }
  },
  watch: {
    nodePasting(status) {
      if (status && this.isOpacityNode) {
        this.$emit('changeProcesss', this.processTree.childNode || {});
        this.$store.dispatch('storeClipboardNode', {}); // 剪切只可粘贴一次
        this.$store.dispatch('changeNodePasteStatus', false);
      }
    }
  },
  methods: {
    titleColor(nodeData) {
      // 【v2.9.7】节点类型 0: 审批人节点  1: 条件分支  2: 条件子节点  3:抄送节点 4:飞来通告审批节点 5: 加签
      const colorMap = [
        { background: '#fd8546', color: '#ffffff' },
        { background: '#ffffff', color: '#406EFF' },
        { background: '#ffffff', color: '#406EFF' },
        { background: '#406EFF', color: '#ffffff' },
        { background: '#31CC9C', color: '#ffffff' },
        { background: '#a691ff', color: '#ffffff' }
      ];
      const typeNumber = (nodeData.nodeType === 0 && !!nodeData.isCountersign) ? 5 : nodeData.nodeType;
      return colorMap[typeNumber || 0];
    },
    editNodeName() {
      this.isInput = !this.isInput;
    },
    editConditionName(item) {
      this.$set(item, '_isInput', !item._isInput);
    },
    // 新增条件
    addCondition() {
      const conditionNodes = this.processTree.conditionNodes;
      const len = conditionNodes.length;
      const priority = conditionNodes[len - 1].conditionList ? conditionNodes[len - 1].conditionList.priority || len : len;

      this.processTree.conditionNodes.push({
        nodeName: `条件${len + 1}`,
        nodeType: 2,
        conditionList: {
          priority: Math.min(priority + 1, 10000),
          rule: 0,
          list: []
        }
      });
    },
    /**
     isCopy: 是否为复制
     isConditionNode: 是否为条件节点
     * */
    handleNodeCopy(isCopy = false, isConditionNode = false) {
      const processTreeCopy = _.cloneDeep(this.processTree);
      // 复制条件时，需删除其后续节点
      if (isConditionNode) {
        processTreeCopy.childNode = {};
      }
      const params = {
        isCopy,
        isConditionNode,
        node: processTreeCopy
      };
      this.nodeCutting = !isCopy;
      this.$store.dispatch('storeClipboardNode', params);
      this.$message.closeAll();
      const messageText = `${isCopy ? '复制' : '剪切'}成功，请选择要粘贴的位置`;
      this.$message.success(messageText);
    },
    deleteNode() {
      this.$confirm('是否确定删除该节点？', '', {
        confirmButtonText: '确定',
        type: 'warning',
        showClose: false,
        center: true,
        iconClass: 'charge-icon',
        customClass: 'del-message del-message-cancel'
      }).then(() => {
        this.$emit('changeProcesss', this.processTree.childNode || {});
      });
    },
    // 分支节点操作
    deleteCondition(item, index) {
      this.$confirm('是否确定删除该分支？', '', {
        confirmButtonText: '确定',
        type: 'warning',
        showClose: false,
        center: true,
        iconClass: 'charge-icon',
        customClass: 'del-message del-message-cancel'
      }).then(() => {
        const conditionNodes = this.processTree.conditionNodes;
        // 至少有两个分支，否则删除节点
        if (conditionNodes.length <= 2) {
          this.$emit('changeProcesss', this.processTree.childNode || {});
        } else {
          this.processTree.conditionNodes.splice(index, 1);
        }
      });
    },
    copyCondition(item) {
      const conditionNodes = this.processTree.conditionNodes;
      const len = conditionNodes.length;
      const data = JSON.parse(JSON.stringify(item));
      this.setId(data);
      this.$nextTick(() => {
        data.nodeName += `-副本`;
        const priority = conditionNodes[len - 1].conditionList ? conditionNodes[len - 1].conditionList.priority || len : len;
        data.conditionList.priority = Math.min(priority + 1, 10000);
        const curIndex = conditionNodes.findIndex(i => i.id === item.id);
        if (curIndex >= 0) {
          this.processTree.conditionNodes.splice(curIndex + 1, 0, data);
          this.onEnd(); // 调整优先级
        } else {
          this.processTree.conditionNodes.push(data);
        }
      });
    },
    // 打开弹窗
    openAudit(item) {
      // 节点类型 0: 审批人节点  1: 条件分支  2: 条件子节点  3:抄送节点 4:飞来通告审批 5: 加签
      if ([0, 5].includes(this.processTree.nodeType)) {
        this.$store.commit('SET_APPROVE_DATA', this.processTree);
        this.$store.commit('SET_APPROVE_SWITCH', true);
      } else if (this.processTree.nodeType === 3) {
        if (!this.processTree.noticeTemplate) {
          this.$set(this.processTree, 'noticeTemplate', { isOpen: false, title: '', content: '' });
        }
        this.$store.commit('SET_COPYER_DATA', this.processTree);
        this.$store.commit('SET_COPYER_SWITCH', true);
      } else if (item && item.nodeType === 2) {
        this.$store.commit('SET_CONDITION_DATA', item);
        this.$store.commit('SET_CONDITION_TREE', this.processTree);
        this.$store.commit('SET_CONDITION_SWITCH', true);
      } else if (this.processTree.nodeType === 4) {
        if (!this.processTree.examineRoles || this.processTree.examineRoles.length === 0) {
          this.$set(this.processTree, 'examineRoles', [{ roleName: '', roleType: ROLE_TYPE.FLYNOTICE }]);
        }
        this.$store.commit('SET_FLYNOTICE_DATA', this.processTree);
        this.$store.commit('SET_FLYNOTICE_SWITCH', true);
      }
    },
    // tool
    isNotEmpty(obj) {
      if (!obj) return false;
      return Object.keys(obj).length > 0;
    },
    setId(item) {
      if (!item || !this.isNotEmpty(item)) return;
      item.id = createIntTypeNumber();
      if (item.childNode) {
        this.setId(item.childNode);
      }
    },
    arrToStr(arr, key) {
      if (!arr || arr.length === 0) return '';
      return arr.map(i => i[key]).join('，');
    },
    getCopyerName(item) {
      const arr = item.examineRoles;
      if (!arr || arr.length === 0) return '';
      const ans = [];
      arr.forEach(i => {
        switch (i.roleType) {
          case ROLE_TYPE.CREATOR:
            ans.push('任务创建人');
            break;
          case ROLE_TYPE.DEPARTMENT:
            i.departmentList && i.departmentList.forEach(j => {
              ans.push(j.name);
            });
            break;
          case ROLE_TYPE.CUSTOMIZE:
            i.diyUserList.forEach(j => {
              ans.push(j.userName);
            });
            break;
          case ROLE_TYPE.UNLIMITED:
            ans.push('不限制审批人');
            break;
          case ROLE_TYPE.PROPOSER:
            ans.push('申请人');
            break;
          case ROLE_TYPE.DIRECTOR:
            ans.push(['当前部门主管', '部门上级主管', '部门最高主管'][i.manageRole] || '主管');
            break;
          case ROLE_TYPE.DESIGNATE:
            this.allUserFields.forEach(userField => {
              if (userField.key === i.designateUserSelect) {
                ans.push(userField.name);
              }
            });
            break;
          case ROLE_TYPE.BP_APPROVER:
            this.BPList.forEach(item => {
              if (i.bpNames.includes(item.name)) {
                ans.push(item.name);
              }
            });
            break;
          case ROLE_TYPE.DESIGNATE_DIRECTOR:
            this.allUserFields.forEach(item => {
              if (i.designateDirectorUser === item.key) {
                ans.push(`${item.name}-${['当前部门主管', '部门上级主管', '部门最高主管'][i.designateDirector] || '主管'}`);
              }
            });
            break;
          case ROLE_TYPE.CREATOR_SUPERIOR:
            ans.push('创建人直属上级');
            break;
          case ROLE_TYPE.ROLE_GROUP:
            this.roleGroupList.forEach(role => {
              if (role.id === i.roleGroup) {
                ans.push(role.name);
              }
            });
            break;
          case ROLE_TYPE.ARREARS_USERS:
            ans.push(['转交人', '被转交人'][i.transferRole] || '指定人员字段');
            break;
          case ROLE_TYPE.AUTHUSER:
            ans.push('授权人');
            break;
        }
      });
      return ans.join('，');
    },
    getConditionName(list) {
      if (!list[0].keywordName) return '';
      const { isFixed } = this.$route.query;
      // 固定表单的值字段：当类型为部门时取的就是 valueData，其他为 value
      // 不是固定表单的一般都取 valueData
      let val;
      if (isFixed) {
        val = departmentFields.includes(list[0].keyword) || list[0].type === 'user' ? list[0].valueData : list[0].value;
        if (val && timeFields.includes(list[0].keyword)) {
          val = format(val, 'YYYY/MM/DD');
        }
        // 购销委托类合同 合同日期/付款方式
        if (list[0].keyword === 'cooperDate') {
          val = COOPER_DATE_TYPES[val] || val;
        }
      } else {
        val = list[0].valueData;
      }

      if (list[0].type === 'user' && [1, 3, 4].includes(list[0].userType)) {
        // userType 条件类型， 0: 自定义人员 1: 任务创建人 2: 选择部门 3: 角色组 4: 获取BP人员
        val = ['', '任务创建人', '', '角色组', '获取BP人员'][list[0].userType];
      } else if (val && typeof val === 'object') {
        if (Array.isArray(val)) {
          val = val.map(i => {
            if (typeof i !== 'object') return i;
            if (i.userName) {
              return i.userName;
            } else if (i.name) {
              return i.name;
            } else {
              return i.id;
            }
          }).join(',');
        } else {
          if (val.userName) {
            val = val.userName;
          } else if (val.name) {
            val = val.name;
          } else {
            val = val.id;
          }
        }
      }
      const ans = `${list[0].keywordName}${list[0].math}${val === null ? '' : val}`;
      return ans;
    },
    onEnd(data) {
      // 重新分配优先级，根据已有的值分配
      const prioritys = this.processTree.conditionNodes.map(i => i.conditionList.priority);
      prioritys.sort((a, b) => a - b);
      this.processTree.conditionNodes.forEach((i, index) => {
        i.conditionList.priority = prioritys[index];
      });
    }
  }
};
</script>

<style lang="scss" scoped>
// .container {
//   width: 100%;
// }
.node-wrap {
  display: flex;
  align-items: center;
  flex-direction: column;
  .node-wrap-box {
    display: inline-flex;
    flex-direction: column;
    position: relative;
    width: 240px;
    min-height: 80px;
    flex-shrink: 0;
    background: #fff;
    cursor: pointer;
    z-index: 2;
    border-radius: 4px;
    box-shadow: 0px 3px 6px 0px #e6e6e6;
    &::before {
      content: "";
      position: absolute;
      top: -12px;
      z-index: -1;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 4px;
      border-style: solid;
      border-width: 8px 6px 4px;
      border-color: #cacaca transparent transparent;
      background: #fff;
    }
    .node-wrap-content {
      position: absolute;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
    }
  }
}
.title {
  padding: 0 8px;
  height: 24px;
  display: flex;
  align-items: center;
  font-size: 12px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  img {
    width: 12px;
    height: 12px;
    margin-right: 4px;
  }
}
.text-hover {
  cursor: pointer;
  &:hover {
    text-decoration: underline;
  }
}
.end-node {
  display: flex;
  align-items: center;
  flex-direction: column;
  .dot {
    width: 8px;
    height: 8px;
    margin: auto;
    border-radius: 50%;
    background: #dbdcdc;
  }
  .text {
    font-size: 14px;
    color: #333;
  }
}
.batch-wrap {
  position: relative;
  .wrap-shadow {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #fff;
    opacity: .5;
    z-index: 999;
    top: -16px;
  }
  .branch-box-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    .branch-box{
      display: flex;
      position: relative;
      border-bottom: 2px solid #DDDDDD;
      border-top: 2px solid #DDDDDD;
      .add-branch {
        position: absolute;
        padding: 0 12px;
        background: #ffffff;
        color: #406eff;
        height: 28px;
        border-radius: 4px;
        box-shadow: 0px 2px 6px 0px #e6e6e6;
        top: -14px;
        left: 50%;
        text-align: center;
        font-size: 14px;
        transform: translateX(-50%);
        line-height: 28px;
        z-index: 3;
        cursor: pointer;
        overflow: hidden;
      }
    }
    .col-box {
      position: relative;
      display: flex;
      flex-direction: column;
      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 0;
        margin: auto;
        width: 2px;
        height: 100%;
        background-color: #dddddd;
      }
    }
  }
}
.condition-node-box {
  padding-top: 32px;
  padding-right: 50px;
  padding-left: 50px;
  display: inline-flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
  .condition-node {
    width: 240px;
    min-height: 80px;
    flex-shrink: 0;
    background: #fff;
    cursor: pointer;
    position: relative;
    border-radius: 4px;
    box-shadow: 0px 3px 6px 0px #e6e6e6;
    margin: 0 auto;
  }
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 2px;
    height: 100%;
    background-color: #ddd;
  }
}
.top-left-cover-line, .top-right-cover-line {
  position: absolute;
  height: 5px;
  width: 50%;
  //width: 170px;
  background-color: #fff;
  top: -3px;
  z-index: 2;
}
.bottom-left-cover-line, .bottom-right-cover-line {
  position: absolute;
  height: 5px;
  z-index: 2;
  width: 50%;
  //width: 170px;
  background-color: #fff;
  bottom: -3px;
}
.top-right-cover-line, .bottom-right-cover-line {
  right: -1px;
}
.top-left-cover-line, .bottom-left-cover-line {
  left: -1px;
}
.flex-1 {
  flex: 1;
}
.btn-hover {
  // border: 1px solid transparent;
  &:hover {
    outline: 1px solid #406EFF;
    .top-btn {
      display: flex;
    }
    .priority-text {
      display: none;
    }
  }
}
.branch-hover {
  display: flex;
  .operate-group {
    display: none;
  }
  &:hover {
    border: 1px solid #406EFF;
    .operate-group {
      background-color: #406eff;
      display: flex;
      padding: 0 8px;
      margin-left: 4px;
      margin-right: -12px;
    }
  }
}
.top-btn {
  display: none;
  align-items: center;
  .copy {
    font-size: 15px;
    margin-right: 4px;
  }
  .icon {
    font-size: 16px;
    cursor: pointer;
  }
  .action-icon {
    width: 16px;
    height: 16px;
    margin-right: 4px;
  }
}
.node-wrap-box {
  display: flex;
  flex-direction: column;
}
.node-info {
  display: flex;
  flex:1;
  padding: 0 8px;
  overflow: hidden;
  .info {
    flex: 1;
    display: flex;
    justify-content: center;
    flex-direction: column;
    max-width: calc(100% - 20px);
  }
  .condition-info {
    flex: 1;
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 100%;
  }
  .info-item {
    font-size: 14px;
    color: #333333;
    line-height: 1.5;
    max-width: 100%;
  }
  .right-btn {
    display: flex;
    padding: 0 3px;
    font-size: 14px;
    align-items: center;
    flex-shrink: 0;
    color: #333333;
  }
}
.priority-text {
  font-size: 12px;
  color: #999999;
}
.editable-title-input {
  width: 100px;
  flex:1;
  &::v-deep {
    .el-input__inner {
      border-radius: 0;
      border-color: #406EFF;
      height: 18px;
      width: 100px;
      padding-left: 4px;
      text-indent: 0;
      font-size: 12px;
      line-height: 18px;
    }
  }
}
.num-sty {
  margin-left: 3px;
  font-size: 14px;
  color: #406EFF;
}
.flex-div {
  display: flex;
  align-items: center;
}
.task-img {
  width: 125px;
}
.draggable-item-list {
  display: flex;
  background-color: #fff;
}
.sortable-chosen {
  .node-wrap-box::before {
    display: none;
  }
}

</style>
